<template>
  <div class="head">
      <h1>欢迎进入首页</h1>
      <el-button @click="query">查询用户信息</el-button>
      <el-button type="info" @click="add">添加用户信息</el-button>
      <el-button type="warning" @click="edit">修改用户信息</el-button>
      <el-button type="danger" @click="del">删除用户信息</el-button>
      <el-button type="primary"  @click="down" circle >
          <el-icon>
          <!-- <Icon-download /> -->
            <Download/>
          </el-icon>
      </el-button>
      <el-button type="success" @click="zhifu">微信支付</el-button>
      <el-button type="success" @click="ZFBPay">支付宝支付</el-button>  
      <el-button type="primary" @click="logout">退出</el-button>
      <vueQr
            v-show="flg"
            :text="payResult.codeUrl"
            :margin="0"
            colorDark="black"
            colorLight="white"
            
          
      ></vueQr>

      <vueQr
            v-show="flg1"
            :text='ZFBPayResult.codeUrl'
            :margin="0"
            colorDark="black"
            colorLight="white"
            
          
      ></vueQr>

<!-- 
      <vueQr
           
            text='https://qr.alipay.com/bax07611dxmpk0mya7zz0086'
            :margin="0"
            colorDark="black"
            colorLight="white"
            
          
      ></vueQr> -->
    
  </div>
 

</template>

<script lang="ts" setup>

import {Download} from '@element-plus/icons-vue';
import { apiLogout,apiQuery,apiAdd,apiUpdate,apiDel,apiDown } from "../api/apis"; 
import {apiWeiXinZhiFu,apiWeiXinZhiFuPayStatus,apiZhiFuBaoPay,apiZFBPayStatus} from '../api/zhiFuApi'

import vueQr from 'vue-qr/src/packages/vue-qr.vue'

const route=useRoute();
const router=useRouter();

const id=ref(route.params.id)


const orderNo=ref('e334ce2a6b1d4bc69113')
const flg=ref(false)
const flg1=ref(false)
const payResult=ref({
    codeUrl:"",
})

const ZFBPayResult=ref({
    codeUrl:"",
})

let interval:any


const logout=async ()=>{
  console.log("退出按钮执行了");
  let res=await apiLogout(); 
  sessionStorage.removeItem('token');
  router.push('/login')
}


const query=async()=>{
  console.log("查询按钮执行了");
  let res=await apiQuery();
  console.log(res);
}

const add=async()=>{
  console.log("添加按钮执行了");
  let res=await apiAdd();
  console.log(res);
}

const edit=async()=>{
  console.log("修改按钮执行了");
  let res=await apiUpdate();
  console.log(res);
}

const del=async()=>{
  console.log("删除按钮执行了");
  let res=await apiDel();
  console.log(res);
}
const down=async()=>{
  console.log("下载按钮执行了");
  let res=await apiDown();
  console.log(res);
}


//生成微信支付的二维码
const zhifu=async()=>{
  console.log("微信支付按钮执行了");
  let res=await apiWeiXinZhiFu(orderNo.value);
  console.log("微信支付结果");
  console.log(res);
  payResult.value=res.data.data;

  console.log("========payResult==========");
  console.log(payResult.value);
  flg.value=true;
  interval=setInterval(()=>{
    console.log("定时器执行了");
    queryWeiXinPayStatus();
  },5000)
}

//查询微信支付状态
const queryWeiXinPayStatus=async()=>{
  console.log("查询支付状态");
  let res=await apiWeiXinZhiFuPayStatus(orderNo.value);
  if(res.data.code===400){
     return;
  }
  console.log("支付结果");
  console.log(res);
  clearInterval(interval);
  flg.value=false;
  
  payResult.value.codeUrl="";
  console.log('使用微信支付成功');
  console.log(flg.value);
  console.log("===========================================================");
  setTimeout(()=>{
    router.go(0);
  },2000)
}



//生成支付宝支付的二维码
const ZFBPay=async()=>{
  console.log("支付宝支付按钮执行了");
  let res=await apiZhiFuBaoPay(orderNo.value);
  console.log("支付宝支付结果");
  console.log(res);
  ZFBPayResult.value.codeUrl=res.data.data;
  console.log("========payResult==========");
  console.log(ZFBPayResult.value.codeUrl);
  flg1.value=true;
  interval=setInterval(()=>{
    console.log("定时器执行了");
    queryZFBPayStatus();
  },5000)


}


//查询支付宝支付状态
const queryZFBPayStatus=async()=>{
  console.log("查询支付状态");
  let res=await apiZFBPayStatus(orderNo.value);
  if(res.data.code==400){
    return;
  }
  console.log("支付结果");
  console.log(res);
  clearInterval(interval);
  flg1.value=false;
  ZFBPayResult.value.codeUrl="";
  console.log('使用支付宝支付成功');
  console.log(flg.value);
  console.log("===========================================================");
  setTimeout(()=>{
    router.go(0);
  },2000)
  

}





console.log(id.value);
 

    

</script>

<style  lang="scss" scoped>
div.head{
    width:800px;
    height: 100px;
    background-color: #F4E2D8;
    text-align: center;
    line-height: 100px;
    font-size: 30px;
    font-weight: bold;
    color: #beecd8;
}

</style>